<template>
  <div>
    <ul class="entry-list">
      <li class="item" v-for="(item,index) in list" :key=item.id>
        <router-link class="entry-link" :to="'/article/'+item.id">
          <div class="content-box">
            <ul class="metalist">
              <li class="meta-item hot">热</li>
              <li class="meta-item post">专栏</li>
              <li class="meta-item">
                <user-floatbox :userid="Number(item.author.id)">
                  <router-link :to="'/user/'+item.author.id" class="meta-item-link">
                    {{item.author.name}}
                  </router-link>
                </user-floatbox>
              </li>
              <li class="meta-item">4小时前</li>
              <li class="meta-item tag">
                <router-link class="meta-item-link" :to="'/tag/'+tagItem.id" v-for="tagItem in item.second_module" :key="tagItem.id">
                  {{tagItem.module_name}}
                </router-link>
              </li>
            </ul>
            <div class="content-title">
              {{item.title}}
            </div>
            <div class="content-action">
              <ul class="action-list">
                <li class="action-item like" :class="{active: item.isPraise}" @click.prevent="praise(item.id,index)">
                  <i class="iconfont">&#xe606;</i>
                  <span>{{item.praise}}</span>
                </li>
                <li class="action-item comment">
                  <i class="iconfont">&#xe66d;</i>
                  <span>{{item.comment}}</span>
                </li>
                <li class="action-item share" title="分享">
                  <i class="iconfont">&#xe67a;</i>
                </li>
                <li class="action-item collect" title="收藏"  :class="{active: item.isFavorite}" @click.prevent="favorite(item.id,index)">
                  <i class="iconfont">&#xe625;</i>
                </li>
              </ul>
            </div>
          </div>
        </router-link>
      </li>
    </ul>
    <div class="getMore" v-show="!this.ajax.isEnd">正在加载……</div>
    <div class="getMore" v-show="this.ajax.isEnd">
      没有更多文章了，快去<router-link class="link" to="/article/add">发表</router-link>吧
    </div>
  </div>
</template>

<script>
/**
 * 临时笔记
 * 1.大致框架搭建------完成
 * 2.主要信息填写完成-----完成
 * 3.页面跳转时重新加载列表------完成
 * 4.滚动到底部自动加载下一页----完成
 */
import userFloatbox from '@/components/userfloatbox/userFloatbox'
export default {
  name: 'articleList',
  data () {
    return {
      list: [],
      ajax: {
        isEnd: true,
        page: 1
      },
      logic: {
        loading: false, // 滚动到底部之后设置此值为true，以免多次触发函数
        change: true // 此值默认为真，即每次加载清空list，滚动到底部的时候设置此值为false，即每次加载都叠加
      }
    }
  },
  props: {
    tagId: String,
    articleId: 0
  },
  components: {
    userFloatbox
  },
  methods: {
    getMoreList () {
      // console.log('jiazai')
      this.$ajax({
        method: 'post',
        url: '/web/php/list.php',
        data: this.$qs.stringify({
          type: 'get_articlepage_more_list',
          tagId: this.tagId,
          article_id: this.articleId,
          page: this.ajax.page
        })
      }).then((result) => {
        // console.log(result)
        result = result.data
        if (this.logic.change) {
          this.list = []
          this.ajax.isEnd = true
        }
        this.list.push.apply(this.list, result.dataInfo.list)
        this.ajax.isEnd = result.dataInfo.isEnd
        this.logic.loading = false // 加载完成之后此值为false。滚动到底部可以再次触发
      })
    },
    handleScroll () {
      let scrollTop = document.documentElement.scrollTop || document.body.scrollTop // 卷去的高度
      let browHeight = document.documentElement.clientHeight // 浏览器可视高度
      let allHeight = document.body.scrollHeight // 总高度
      let bottomHeight = allHeight - browHeight - scrollTop
      if (bottomHeight < 400 && !this.ajax.isEnd) {
        if (!this.logic.loading) {
          this.logic.loading = true
          this.logic.change = false
          this.ajax.page++
          this.getMoreList()
        }
      }
    },
    praise (ajaxArticleId, thisIndex) {
      this.$ajax({
        method: 'post',
        url: '/web/php/article.php',
        data: this.$qs.stringify({
          type: 'praise_article',
          articleId: ajaxArticleId
          // page: this.ajax.page
        })
      }).then((result) => {
        console.log(result)
        result = result.data
        switch (result.returnCode) {
          case 10040:
            this.common.showLogBox(this)
            break
          case 1001300:
            this.list[thisIndex].isPraise = true
            this.list[thisIndex].praise++
            break
          case 1001302:
            this.list[thisIndex].isPraise = false
            this.list[thisIndex].praise--
        }
      })
    },
    favorite (ajaxArticleId, thisIndex) {
      this.$ajax({
        method: 'post',
        url: '/web/php/article.php',
        data: this.$qs.stringify({
          type: 'favorite_article',
          articleId: ajaxArticleId
        })
      }).then((result) => {
        console.log(result)
        result = result.data
        switch (result.returnCode) {
          case 10040:
            this.common.showLogBox(this)
            break
          case 1001400:
            this.list[thisIndex].isFavorite = true
            break
          case 1001402:
            this.list[thisIndex].isFavorite = false
        }
      })
    }
  },
  watch: {
    tagId () {
      this.logic.change = true
      this.getMoreList()
    },
    articleId () {
      this.logic.change = true
      this.getMoreList()
    }
  },
  created () {
    window.addEventListener('scroll', this.handleScroll)
  },
  destroyed () {
    window.removeEventListener('scroll', this.handleScroll)
  }
}

</script>
<style lang='stylus' scoped>
@import '~styles/varibles'
.getMore
  text-align center
  line-height .6rem
  color $theme-3-color
  padding .2rem 0
  .link
    margin 0 .2rem
    color $theme-color
.entry-list
  width 100%
  background $theme-background
  .item
    border-bottom .02rem solid rgba(178,186,194,.15)
    .entry-link
      &:visited
        color $theme-4-color
      .content-box
        padding .36rem .48rem
        flex-direction column
        &:hover
          background rgba(0,0,0,.01)
          .share,.collect
            visibility visible!important
        .metalist
          display flex
          font-size .24rem
          .meta-item
            position relative
            padding-right .32rem
            color $theme-4-color
            white-space nowrap
            &.hot
              color red
            &.post
              color #b71ed7
            &:last-child:after
              display none
            &:after
              content: ''
              width .04rem
              height .04rem
              background #b2bac2
              margin 0 .14rem
              position absolute
              border-radius 50%
              top 50%
              right 0
            .meta-item-link
              color inherit
              &:hover
                color $theme-color
            &.tag
              .meta-item-link:after
                content "/"
                margin 0 .05rem
              .meta-item-link:last-child:after
                display none
        .content-title
          padding .12rem 0 .24rem
          font-weight bold
          font-size .36rem
          white-space nowrap
          overflow hidden
          text-overflow ellipsis
        .action-list
          display flex
          white-space nowrap
          .action-item
            color $theme-4-color
            height 0.48rem
            display flex
            align-items center
            border .02rem solid #edeeef
            border-radius .02rem
            padding 0 .2rem
            &.like.active
              color $theme-8-color
            &.collect.active
              color $theme-9-color
            &:hover
              background #f7f8fa
            .iconfont
              font-size .26rem
            span
              font-weight bold
              font-size .28rem
              margin-left .08rem
            &.comment,&.collect
              margin-left -.02rem
            &.share
              margin-left .3rem
            &.share,&.collect
              visibility hidden
</style>
